<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>floodFill</title>
    <link rel="stylesheet" href="./css/style.css" />
    <script type="text/javascript" src="../../lib/aircity/ac_conf.js"></script>
    <script type="text/javascript" src="../../lib/aircity/ac.min.js"></script>
    <script type="text/javascript" src="../../lib/vue3.js"></script>
  </head>
  <body>
    <div id="app">
      <div id="player" style="height: 100%"></div>
      <div class="control">
        <div class="top">
          <div>淹没分析</div>
        </div>
        <div class="params">
          <div class="button-box">
            <button @click="start()">开始淹没分析</button>
          </div>

          <div class="button-box">
            <button @click="stop()" class="sunlight stop">停止淹没分析</button>
          </div>

          <div class="title">参数设置</div>
          <div class="item">
            <div class="label">
              <div>水位高度</div>
              <div style="color: #b6b6cf">({{ elevation }}m)</div>
            </div>
            <div class="content">
              <div class="range">
                <input type="range" v-model="elevation" :min="0" :max="15" :step="0.1" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <script type="text/javascript">
      // 按需获取
      const { createApp, reactive, watch, ref } = Vue
      const seed = [521646.9, 2462504.96, 139]
      // vue组件
      const vueComposition = {
        setup() {
          // 初始化y轴高度
          const elevation = ref(0)

          /**
           * 开始淹没分析
           */
          const start = () => {
            __g.camera.set(520679.390625, 2463015.8825, 512.775781, -12.10761, 33.959984, 2)

            fdapi.floodFill.clear()

            const y = Number(elevation.value) + seed[2]
            let o = {
              id: 'fd1',
              min: [511906.385, 2456317], //水淹分析范围min
              max: [525568.56, 2465221], //水淹分析范围max
              seed: seed, //出水点 注意：出水点一定要在水淹分析范围[min~max]内，否则接口会报错
              elevation: y, //水位高度
              color: [7 / 255, 50 / 255, 80 / 255, 1], //水颜色
              precision: 1 //水淹模拟精度
            }
            fdapi.floodFill.add(o)
          }

          /**
           * 淹没分析高度更新
           */
          const update = () => {
            // y轴高度
            const y = Number(elevation.value) + seed[2]

            let o = {
              id: 'fd1',
              elevation: y //水位高度
            }
            fdapi.floodFill.update(o)
          }

          // 防抖
          const debounce = (func, wait) => {
            let timeout = null
            return function () {
              clearTimeout(timeout)
              timeout = setTimeout(() => {
                func()
              }, wait)
            }
          }

          // elevation监听，开启更新事件
          watch(elevation, debounce(update, 100))

          /**
           * 停止淹没分析
           */
          const stop = () => {
            // 关闭分析
            __g.floodFill.clear()
          }

          return {
            elevation,
            start,
            stop
          }
        }
      }

      // 挂载vue
      const app = createApp(vueComposition).mount('#app')

      /**
       * 初始化三维
       * @constructor
       */
      const OnLoad = () => {
        new DigitalTwinPlayer(HostConfig.Player, {
          domId: 'player' //DOM元素
        }).getAPI() // getAPI后可全局调用__g
      }

      /**
       * 自适应分辨率
       * @returns {Promise<void>}
       */
      const onResize = async () => {
        let playerView = document.getElementById('player')
        playerView.style.height = window.innerHeight + 'px'
        playerView.style.width = window.innerWidth + 'px'
      }

      // 页面加载调用
      window.addEventListener('load', OnLoad, true)

      // 页面变换调用
      window.addEventListener('resize', onResize, true)

      //页面离开事件(离开时清除此页面的操作及重置场景)
      window.onunload = function (e) {
        __g.waterMesh.clear()
        // 重置场景
        __g.reset()
      }
    </script>
  </body>
</html>
